<!--
 描述: 3D立体柱状图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
  <div class="wrap-container trigle">
    <!-- <div class="bar bar-img"></div>
      <div class="bar bar-img1"></div>
      <div class="bar bar-img2"></div> -->
    <dv-border-box-1 class="modeChild"
      ><div class="chartsdom" id="chart_3d"></div
    ></dv-border-box-1>
    <div class="pagination">
      <div class="endCard">
        <div class="items">
          <span>累计消费总额</span><span>193.8<span>万</span></span>
          <div class="procss"><span style="width: 20px;"></span></div>
        </div>
        <div class="items">
          <span>累计充值总额</span><span>393.8<span>万</span></span>
          <div class="procss"><span style="width:30px;"></span></div>
        </div>
        <div class="items">
          <span>累计订单数</span><span>693.8<span>万</span></span>
          <div class="procss"><span style="width: 40px;"></span></div>
        </div>
        <div class="items">
          <span>同比增长率</span><span>793.8<span>万</span></span>
          <div class="procss"><span style="width: 50px;"></span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hotmodel",
  data() {
    return {
      option: null,
    };
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById("chart_3d"));
      let xData = [
        "A1",
        "A2",
        "A3",
        "A4",
        "B1",
        "B2",
        "B3",
        "B4",
        "C1",
        "C2",
        "C3",
      ];
      let days = ["1", "2", "3", "4", "5", "6"];
      let sex = ["女", "男"];
      let data = [
        [0, 0, 13, sex[0], xData[0], 500, 25],
        [0, 1, 2.5, sex[0], xData[1], 1000, 35],
        [0, 2, 11.5, sex[1], xData[2], 3000, 5],
        [0, 3, 1, sex[1], xData[3], 300, 15],
        [0, 4, 2, sex[0], xData[4], 500, 55],
        [0, 5, 30, sex[0], xData[5], 1500, 45],

        [1, 5, 6, sex[1], xData[6], 300, 25],
        [1, 1, 20, sex[0], xData[7], 500, 22],
        [1, 2, 2, sex[0], xData[8], 1500, 38],
        [1, 3, 1.5, sex[1], xData[9], 2500, 25],
        [1, 4, 3, sex[0], xData[10], 3500, 49],
      ];

      this.option = {
        tooltip: {
          borderColor: "#ffffff",
          borderWidth: 1,
          padding: 15,
          formatter: (params) => {
            let html = `${params.seriesName} <br> <span style="color: #000;">楼栋：${params.value[4]} <br> 使用时间：${params.value[2]}年<br> 总金额：${params.value[5]} <br> 总人数：${params.value[6]}</span>`;
            return html;
          },
          textStyle: {
            color: "#000000",
            fontSize: 16,
          },
        },
        xAxis3D: {
          type: "category",
          data: xData,
        },
        yAxis3D: {
          type: "category",
          data: days,
        },
        zAxis3D: {
          type: "value",
        },
        grid3D: {
          show: false,
          boxWidth: 180,
          boxDepth: 180,
          viewControl: {
            alpha: 0,
            beta: 150,
          },
        },
        series: [
          {
            type: "bar3D",
            name: "当前值",
            data: data.map((item) => {
            //   console.log(
            //     item[1],
            //     item[0],
            //     item[2],
            //     item[3],
            //     item[4],
            //     item[5],
            //     item[6]
            //   );
              return {
                value: [
                  item[1],
                  item[0],
                  item[2],
                  item[3],
                  item[4],
                  item[5],
                  item[6],
                ],
              };
            }),
            shading: "lambert",
            label: {
              show: true,
              fontSize: "20",
              formatter: (params) => {
                return params.value[4];
              },
            },
            itemStyle: {
              color: "#17BE74",
              opacity: 0.8,
            },
            emphasis: {
              label: {
                show: true,
              },
              itemStyle: {
                color: "#ffffff",
              },
            },
          },
        ],
      };

      myChart.setOption(this.option, true);
      myChart.on("click",(params)=> {
        this.$router.push({name:"WaterDetail"})
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.trigle {
  left: calc(50% - 300px);
  top: 110px;
  width: 600px;
  height: 900px;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0);
  .pagination {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    // background-color: red;
    .endCard {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .items {
        width: 120px;
        height: 100px;
        background-color:rgba(118,123,127,.5);
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 5px #898b8e;
        .procss {
          height: 12px;
          display: flex;
          border: 1px solid #ccc;
          box-sizing: border-box;
          border-radius: 5px;
          span:nth-child(1) {
            // width: 20px;
            height: 100%;
            background-color: #07D2FE;
            border-radius: 5px;
          }
        }
        span:nth-of-type(1) {
          font-weight: bold;
          font-size: 16px;
          color: #ccc;
        }
        span:nth-of-type(2) {
          font-weight: bold;
          font-size: 30px;
          color: #fff;
        }
      }
    }
  }
  .modeChild {
    height: calc(100% - 200px);
  }
  .chartsdom {
    width: 100%;
    height: 100%;
  }

  .bar {
    width: 100%;
    height: 100%;
    position: absolute;
    &.bar-img {
      bottom: 0;
      background: url(../../assets/img/bk_circle.png) no-repeat center 97%;
      background-size: 100%;
      filter: hue-rotate(180deg);
    }
    &.bar-img1 {
      bottom: 30%;
      background: url(../../assets/img/bk_circle1.png) no-repeat center 97%;
      background-size: 75%;
      filter: hue-rotate(180deg);
    }
    &.bar-img2 {
      bottom: 60%;
      background: url(../../assets/img/bk_circle2.png) no-repeat center 97%;
      background-size: 50%;
      filter: hue-rotate(180deg);
    }
  }
}
</style>
